<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
<script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/js/pintuer.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-ui-1.12.1.custom/jquery-ui.css">
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<script src="${pageContext.request.contextPath}/static/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript">


$(document).ready(function(){
    $('#name').keyup(function(){
        /* $("#NameList option").remove(); */
        $.ajax({
            async: true,
            url: "${pageContext.request.contextPath}/sys/pattern.do?method=findPersonInfoByName",
            type: 'post',
            dataType: 'json',
            data: {
                'username' : $("#name").val() == "" ? null : $("#name").val(),
            },
            success:function(data) {
                var arr = [];
                for(var i in data){        
                    var one = [];
                    one = {};
                    one.label =  data[i].Name+"---"+data[i].oftenAddress+"---"+data[i].farmingcardCode;
                    one.label1=data[i].Name;
                    one.value = data[i].farmingcardCode;
                    one.value1 = data[i].idcardNumber;
                    arr[i] = one;
                    
                }
                console.log(arr);
                $('#name').autocomplete({
                    source : arr,// 数据源
                    scroll: true,
                    select: function(event, ui){
                        // 这里的this指向当前输入框的DOM元素
                        // event参数是事件对象
                        // ui对象只有一个item属性，对应数据源中被选中的对象
                        alert(ui.item.value);
                       /*  $(this).value = ui.item.label; */
                       $( "#name" ).val( ui.item.label1 );
                        $("input[name='farmingcardCode']").val(ui.item.value );
                        $("input[name='idcardNumber']").val(ui.item.value1 );
                        
                        // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
                        event.preventDefault();     
                    }
  
                });
            }
        })
    })
})

</script>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加慢性病类型</strong></div>
  <div class="body-content">
 
    <form method="post" class="form-x" action="${pageContext.request.contextPath}/sys/pattern.do?method=AddChronicPatternInfo&tgId=${tgId}&pageNum=1">  
    
      <div class="form-group">
        <div class="label">
          <label>姓名</label>
        </div>
        
        <div class="field">
          <input class="input w50" id="name" type="text" autocomplete="off" list="NameList" placeholder=" 请输入查找的名字" data-validate="required:请输入查找的名字">
		  <input type="hidden" name="farmingcardCode" />
		  <input type="hidden" name="idcardNumber" />

          <div class="tips"></div>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>慢性病名称</label>
        </div>
        
        <div class="field">
           <select name="illName" class="input w50">
           <c:forEach items="${requestScope.chronicInfos}" var="chronicInfos">
        		<option value="${chronicInfos.illCode}">${chronicInfos.illName}</option> 
        	</c:forEach>
        	</select>
          <div class="tips"></div>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>起始时间</label>
        </div>
        
        <div class="field">
          <input id="startTime" type="date" class="input w50" value="" name="startTime" data-validate="required:请选择开始时间"/>
          <div class="tips" id="display"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>结束时间</label>
        </div>
        
        <div class="field">
          <input type="date" class="input w50" value="" name="endTime" data-validate="required:请选择结束时间" />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
        </div>
      </div> 
    </form>
  </div>
</div>

</body>
</html>